<template>
  <div v-if="visibel" class="jtScreen">
    <div class="cover"></div>

    <div class="content">
      <img
        src="../../../assets/largescreen/close.png"
        @click="visibel = false"
        class="close"
      />
      <div class="head">购票类型</div>
      <div style="padding: 18px 38px">
        <el-form
          :inline="true"
          :model="dataForm"
          class="fromEl"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-select
              v-model="dataForm.startPortNo"
              placeholder="出发港口"
              clearable
            >
              <el-option
                v-for="(item, index) in startOptions"
                :key="index"
                :value="item.portNum"
                :label="item.portName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="dataForm.endPortNo"
              placeholder="到达港口"
              clearable
            >
              <el-option
                v-for="(item, index) in endOptions"
                :key="index"
                :value="item.portNum"
                :label="item.portName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="dataForm.sex" placeholder="性别" clearable>
              <el-option :value="0" label="不是"> </el-option>
              <el-option :value="1" label="是"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="dataForm.isLocal"
              placeholder="是否本地人"
              clearable
            >
              <el-option :value="0" label="不是"> </el-option>
              <el-option :value="1" label="是"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">{{ $t("query") }}</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          stripe
          :header-row-style="{
            background: '#062156',
            color: '#C6D7F1',
            fontSize: '12px',
          }"
          style="width: 100%"
        >
          <el-table-column
            prop="lineNo"
            label="航班次/年龄段"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="childCount"
            label="0-17岁"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="youngCount"
            label="18-24岁"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="twoToThreeCount"
            label="25-34岁"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="threeToFourCount"
            label="35-44岁"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fourToSixCount"
            label="45-60岁"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="moreOlderCount"
            label="60岁以上"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalCount"
            label="总计"
            header-align="center"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataListLoading: false,
      dataList: [],
      visibel: false,
      startOptions: [],
      endOptions: [],
      dataForm: { sex: "", isLocal: "" },
    };
  },
  watch: {},
  methods: {
    init() {
      this.visibel = true;
      Promise.all([this.queryOption(0), this.queryOption(1)]).then(() => {
        // this.dataForm.startPortNo = null;
        // this.dataForm.endPortNo = null;
      });
      this.getDataList();
    },
    queryOption(type) {
      this.$http
        .get("/travel/isshipport/listPort" + `${"?type=" + type}`)
        .then(({ data: res }) => {
          switch (type) {
            case 0:
              this.startOptions = res.data;
              break;
            case 1:
              this.endOptions = res.data;
              break;
          }
        });
    },
    getDataList() {
      this.dataListLoading = true;
      this.$http
        .get("/sys/screen/ship/ticketTypeParamNew", {
          params: this.dataForm,
        })
        .then((res) => {
          this.dataListLoading = false;
          if (res.data.code == 0) {
            this.dataList = res.data.data.ticketTypeDetail;
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>

.mjzyx_pm_map {
  width: 40%;
  margin-top: 30px;
  height: calc(100% - 74px);
  padding: 0 28px;
  overflow: hidden;

  .mpm_item {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mpmi_left {
      width: calc(100% - 55px);
      display: flex;
      align-items: center;

      .mpmil_top {
        width: 47px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-family: YouSheBiaoTiHei;
        color: #ffffff;
      }

      .mpmil_city {
        margin-left: 20px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
        text-align: right;
      }

      .mpmil_line {
        width: 1px;
        height: 42px;
        background: #0a2840;
        margin-left: 10px;
      }

      .mpmil_bl {
        width: calc(100% - 120px);
        height: 6px;
        background: #172640;
        border-radius: 0 3px 3px 0;
        position: relative;

        .mpmil_bl_bfb {
          height: 100%;
          background: linear-gradient(
            270deg,
            #00bff4 0%,
            rgba(4, 110, 255, 0) 100%
          );
          border-radius: 0 3px 3px 0;
        }
      }
    }

    .mpmi_right {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #c6d7f1;
    }
  }
}

.ul-scoll {
  padding-left: 0;
}

.content {
  position: absolute;
  padding: 14px 18px;
  width: 60%;
  left: 20%;
  top: 15%;
  z-index: 1000;
  height: 70%;
  background: url("../../../assets/largescreen/bgMapDia.png") center no-repeat;
  background-size: 100% 100%;
  .right {
    width: 55%;
    height: 100%;
  }
}

.head {
  width: 100%;
  height: 44px;
  background: url("../../../assets/largescreen/y6.png");
  background-repeat: no-repeat;
  padding-left: 35px;
  font-size: 24px;
  font-family: YouSheBiaoTiHei;
  color: #ffffff;
  line-height: 38px;
}

.cover {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.el-icon-error {
  position: absolute;
}

.close {
  position: absolute;
  right: -24px;
  width: 56px;
  top: 0;
  z-index: 1000;
}
</style>
